<template>
	<view class="app-container">
		<view class="form">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form" :errorType="errorType">
				<u-form-item prop="oldPwd" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="form.oldPwd" color="#fff" v-show="showPassword" type="password" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="原密码"
						:focus="focus">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.password" v-show="showPassword" type="password" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="原密码"
							:focus="focus">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd" :name="showPassword ? 'eye-off' : 'eye-fill'" size="22px"
									color="#909399"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="form.oldPwd" color="#fff" v-show="!showPassword" type="text" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="原密码"
						:focus="focus">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.password" v-show="!showPassword" type="text" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="原密码"
							:focus="focus">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd" :name="showPassword ? 'eye-off' : 'eye-fill'" size="22px"
									color="#909399"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="newPwd" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="form.newPwd" color="#fff" v-show="showPassword2" type="password" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="新密码"
						:focus="focus2">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.newPwd" v-show="showPassword2" type="password" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="新密码"
							:focus="focus2">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd2" :name="showPassword2 ? 'eye-off' : 'eye-fill'" size="22px"
									color="#909399"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="form.newPwd" color="#fff" v-show="!showPassword2" type="text" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="新密码"
						:focus="focus2">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.newPwd" v-show="!showPassword2" type="text" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="新密码"
							:focus="focus2">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd2" :name="showPassword2 ? 'eye-off' : 'eye-fill'" size="22px"
									color="#909399"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="okPwd" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="form.okPwd" color="#fff" v-show="showPassword3" type="password" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="确认密码"
						:focus="focus3">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.okPwd" v-show="showPassword3" type="password" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="确认密码"
							:focus="focus3">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd3" :name="showPassword3 ? 'eye-off' : 'eye-fill'" size="22px"
									color="#909399"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="form.okPwd" color="#fff" v-show="!showPassword3" type="text" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="确认密码"
						:focus="focus3">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input v-model="form.okPwd" v-show="!showPassword3" type="text" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="确认密码"
							:focus="focus3">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd3" :name="showPassword3 ? 'eye-off' : 'eye-fill'" size="22px"
									color="#909399"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="name" ref="item" class="form-item">
					<button :loading="loading" class="login-btn" @click="handleOk">确 定</button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {updateUserInfo} from "@/api/user.js"
	export default {
		data() {
			var validPwd2 = (rule,value,callback) =>{
				if (value === "") {
					callback(new Error('请输入密码'));
				} else if (value == this.form.oldPwd) {
					callback(new Error('新密码不能和原密码一致!'));
				} else {
					callback();
				}
			};
			var validPwd3 = (rule,value,callback) =>{
				if (value === "") {
					callback(new Error('请输入密码'));
				} else if (value != this.form.newPwd) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			}
			return {
				form: {
					oldPwd: "",
					newPwd:"",
					okPwd:""
				},
				rules: {
					oldPwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					newPwd: [{
						required: true,
						validator: validPwd2,
						trigger: 'blur'
					}],
					okPwd:[{
						required: true,
						validator: validPwd3,
						trigger: 'blur'
					}]
				},
				showPassword: true,
				showPassword2: true,
				showPassword3: true,
				focus: false,
				focus2: false,
				focus3: false,
				loading: false,
				errorType: "none",
				timer: null
			}
		},
		methods: {
			showPwd() {
				this.showPassword = !this.showPassword;
				this.focus = true;
			},
			showPwd2() {
				this.showPassword2 = !this.showPassword2;
				this.focus2 = true;
			},
			showPwd3() {
				this.showPassword3 = !this.showPassword3;
				this.focus3 = true;
			},
			handleOk() {
				this.$refs.form.validate().then(res => {
					// 校验通过
					this.loading = true
					updateUserInfo({passWord: this.form.newPwd}).then(res => {
						this.loading = false;
						uni.showToast({
							title: "密码修改成功,请重新登录",
							icon:"success",
							duration: 2000
						})
						if(this.timer){
							clearTimeout(this.timer)
						}
						this.timer = setTimeout(() => {
							uni.reLaunch({
								url:"/pages/login/index"
							})
						},1500)
						this.form ={
							oldPwd: "",
							newPwd:"",
							okPwd:""
						}
					})
				}).catch(errors => {
					// uni.$u.toast('请输入用户名或密码')
					this.errorType = "message"
				})
			}
		}
	}
</script>

<style lang="scss">
.form {
		padding: 30px 25px 0;
	}

	.form-item {
		.input {
			height: 50px;
			background-image: linear-gradient(to bottom, #2a2e42, #24293e);
			border: none;
		}

		.text {
			background-image: linear-gradient(to right, #38dde5, #1891d6);
			-webkit-background-clip: text;
			color: transparent;
			font-weight: 600;
			letter-spacing: 2px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.code-btn {
			margin-left: 10px;
			color: #fff;
			background-color: #29988b;
			font-size: 15px;
		}

		.login-btn {
			width: 100%;
			color: #fff;
			font-family: SourceHanSansCN-Normal;
			background-image: linear-gradient(to right, #38dde5, #1891d6);
		}
	}
</style>
